html, body {
  position: relative;
  height: 100%;
}
body {
  background: #444444;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 26px;
  /*height: 10%;*/
  /*line-height: 50px;*/
  color:#fff;
  text-align: center;
  vertical-align:middle;
  margin: 0;
  /*padding-top: 30px;*/
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 999;

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}
h2 {
  font-size: 20px;
  /*height: 10%;*/
  /*line-height: 50px;*/
  color:#fff;
  text-align: center;
  vertical-align:middle;
  margin: 0;
  /*padding-top: 30px;*/
  position: absolute;
  left: 30px;
  top: 60px;
  z-index: 999;

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}

#canv_div{
  position: absolute;
}

/*@media all and (orientation:portrait) {*/
  /*body {*/
    /*background: #ff0000;*/
  /*}*/
  /*.main_style{*/
    /*cursor: default;*/
    /*position: absolute;*/
    /*top: 0px;*/
    /*bottom: 0px;*/
    /*left: 0px;*/
    /*right: 0px;*/
    /*transform-origin: 50% 50% 0px;*/
    /*width: 1600px;*/
    /*height: 1200px;*/
    /*transform: rotate(90deg);*/
    /*-webkit-transform:rotate(90deg);*/
  /*}*/
/*}*/

/*@media all and (orientation:landscape) {*/
  /*body {*/
    /*background: #00ffff;*/
  /*}*/
  /*.main_style{*/
    /*cursor: default;*/
    /*position: absolute;*/
    /*top: 0px;*/
    /*bottom: 0px;*/
    /*left: 0px;*/
    /*right: 0px;*/
    /*transform-origin: 50% 50% 0px;*/
    /*width: 1600px;*/
    /*height: 1200px;*/
    /*transform: rotate(0deg);*/
    /*-webkit-transform:rotate(0deg);*/
  /*}*/
/*}*/

/*视频*/
.video{
  position: absolute;
  /*right: 1%;*/
  /*bottom: 1%;*/
  z-index: 900;

  -webkit-box-shadow: 0 0 8px #666666;
  box-shadow: 0 0 8px #666666;
}

.transparent{
  opacity: 0;
}
.display_hide{
  display: none;
}
/* 蒙板 */
.mask{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: rgba(0,0,0,0.85);
  z-index: 1001;
}
.mask2{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: rgba(0,0,0,0.85);
  z-index: 1001;
}
.screen_mask{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #111111;
  opacity: 0.85;
  z-index: 1001;
}
.load_mask{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #111111;
  opacity: 0.85;
  z-index: 1001;
}

/* 蒙板上图标 */
.disp_icon{
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width:25%;
  max-height: 25%;
  z-index: 1003;
}
.disp_icon_rot90{
  -ms-transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  -moz-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width:25%;
  max-height: 25%;
  z-index: 1003;
}
.disp_icon_l{
  -ms-transform: translate(-150%, -50%);
  -webkit-transform: translate(-150%, -50%);
  -moz-transform: translate(-150%, -50%);
  transform: translate(-150%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width:25%;
  max-height: 25%;
  z-index: 1003;
}
.disp_icon_r{
  -ms-transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width:25%;
  max-height: 25%;
  z-index: 1003;
}
.logo{
  -ms-transform: translate(-50%, 400%);
  -webkit-transform: translate(-50%, 400%);
  -moz-transform: translate(-50%, 400%);
  transform: translate(-50%, 400%);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 20%;
  max-height: 8%;
  z-index: 1002;
}
.logo_rot90{
  -ms-transform: translate(-120%, -50%) rotate(90deg);
  -webkit-transform: translate(-120%, -50%) rotate(90deg);
  -moz-transform: translate(-120%, -50%) rotate(90deg);
  transform: translate(-120%, -50%) rotate(90deg);
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 30%;
  max-height: 8%;
  z-index: 1002;
}

.load_img{
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -100%);
  -webkit-transform: translate(-50%, -100%);
  -moz-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);

  width:30%;
  z-index: 1003;
}
.load_img_rot90{
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-30%, -50%) rotate(90deg);
  -webkit-transform: translate(-30%, -50%) rotate(90deg);
  -moz-transform: translate(-30%, -50%) rotate(90deg);
  transform: translate(-30%, -50%) rotate(90deg);

  width:30%;
  z-index: 1003;
}

.load_txt{
  font-size: 24px;
  color:#fff;
  text-align: center;
  vertical-align:middle;

  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  z-index: 1003;

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}
.load_txt_rot90{
  font-size: 24px;
  color:#fff;
  text-align: center;
  vertical-align:middle;

  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  -moz-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);

  z-index: 1003;

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}

.timeout_txt{
  font-size: 26px;
  color:#fff;
  text-align: center;
  vertical-align:middle;

  position: absolute;
  left: 50%;
  top: 50%;
  /*width:50%;*/

  z-index: 1003;
  -ms-transform: translate(-50%, -70%);
  -webkit-transform: translate(-50%, -70%);
  -moz-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%);

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}
.timeout_ok{
  -ms-transform: translate(-50%, 150%);
  -webkit-transform: translate(-50%, 150%);
  -moz-transform: translate(-50%, 150%);
  transform: translate(-50%, 150%);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1003;
}
.rot90{
  -ms-transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  -moz-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.rot90_2{
  -ms-transform: translate(-120%, -50%) rotate(90deg);
  -webkit-transform: translate(-120%, -50%) rotate(90deg);
  -moz-transform: translate(-120%, -50%) rotate(90deg);
  transform: translate(-120%, -50%) rotate(90deg);
}

@-webkit-keyframes breath{
  0%{-webkit-transform:scale(1,1)}
  40%{-webkit-transform:scale(0.85,0.85)}
  100%{-webkit-transform:scale(1,1)}
}
@keyframes breath{
  0%{transform:scale(1,1)}
  40%{transform:scale(0.85,0.85)}
  100%{transform:scale(1,1)}
}

.breath2{
  -webkit-animation: breath2 2s ease-in-out 0s infinite;
  animation: breath2 2s ease-in-out 0s infinite;
}
@-webkit-keyframes breath2{
  0%{-webkit-transform:translate(-50%, -50%) scale(1,1)}
  40%{-webkit-transform:translate(-50%, -50%) scale(0.85,0.85)}
  100%{-webkit-transform:translate(-50%, -50%) scale(1,1)}
}
@keyframes breath2{
  0%{transform:translate(-50%, -50%) scale(1,1)}
  40%{transform:translate(-50%, -50%) scale(0.85,0.85)}
  100%{transform:translate(-50%, -50%) scale(1,1)}
}

.breath3{
  -webkit-animation: breath3 2s ease-in-out 0s infinite;
  animation: breath3 2s ease-in-out 0s infinite;
}
@-webkit-keyframes breath3{
  0%{-webkit-transform:translate(-50%, -50%) scale(1,1) rotate(90deg)}
  40%{-webkit-transform:translate(-50%, -50%) scale(0.85,0.85) rotate(90deg)}
  100%{-webkit-transform:translate(-50%, -50%) scale(1,1) rotate(90deg)}
}
@keyframes breath3{
  0%{transform:translate(-50%, -50%) scale(1,1) rotate(90deg)}
  40%{transform:translate(-50%, -50%) scale(0.85,0.85) rotate(90deg)}
  100%{transform:translate(-50%, -50%) scale(1,1) rotate(90deg)}
}

/*音乐*/
.music{
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 1000;
}
.music_rot90 {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 1000;

  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.icon-music{
  width: 50px;
  height: 50px;
  -webkit-animation: breath 1.5s ease-in-out 0s infinite;
  animation: breath 1.5s ease-in-out 0s infinite;

  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.music_play{
  background-image:url(http://7xogoq.com1.z0.glb.clouddn.com/itbserver/api/img/play.png);
}
.music_pause{
  background-image:url(http://7xogoq.com1.z0.glb.clouddn.com/itbserver/api/img/pause.png);
}

@keyframes show_hide{
  from{
    opacity: 0;
  }to{
     opacity: 1;
   }
}
@-webkit-keyframes show_hide{
  from{
    opacity: 0;
  }to{
     opacity: 1;
   }
}

.show_hide{
  animation: show_hide 1s linear infinite alternate;
  -webkit-animation: show_hide 1s linear infinite alternate;
}